<template>
  <div>
    <div style="display: flex;">
      <div class="oneNav">
        <!-- vant侧边导航 -->
        <van-sidebar style="white-space: nowrap; overflow-y: scroll;" v-model="activeKey">
          <van-sidebar-item v-for="(item,index) in oneClass" :key="index" :title="item.name" @click="oneNav(index)" />
        </van-sidebar>
      </div>
      <!-- 宫格 -->
      <van-grid column-num="4" :border="false" style="width:100%;">
        <van-grid-item use-slot v-for="(item, index) in twoClass" :title="item.name" :key="index" @click="toDetailListPage(item)">
          <image style="border-radius: 22px;width: 42px; height: 42px;" :src="item.icon" />
          <div style=" font-size: 60%;line-height: var(--card-desc-line-height,15px);color: var(--card-desc-color,#7d7e80);">{{item.name}}</div>
        </van-grid-item>
      </van-grid>
      <!-- 宫格 -->
    </div>
  </div>
</template>


<script>
import utils from "@/utils/index.js";

export default {
  config: {
    navigationBarTitleText: "分类"
  },
  data() {
    return {
      oneClass: [], //一级分类数据
      twoClass: [], //二级分类数据
      detailParam: [], //二级分类数据
      activeKey: 0
    };
  },

  onLoad(options) {
    this.id = options.id;
    this.oneNav(0);
    wx.setNavigationBarTitle({
      title: "分类"
    })
  },
  methods: {
    oneNav(index) {
      //点击一级导航切换
      this.$API.get("/categoryFirst/list").then(res => {
        //
        this.oneClass = res;
        this.twoClass = this.oneClass[index].categoryList;
        for (let i = 0; i < this.twoClass.length; i++) {
          this.twoClass[i].icon = utils.fileMgrUrl + this.twoClass[i].icon;
        }
      });
    },
    toDetailListPage(item) {
      const url = "../categoryList/list?id=" + item.id;
      wx.navigateTo({ url });
    }
  }
};
</script>

<style scoped>
.van-sidebar::-webkit-scrollbar {
  display: none;
}
</style>
